"use client"

import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/ui/theme-toggle"
import { Calendar, LayoutGrid, List, Menu, Plus } from "lucide-react"
import Link from "next/link"
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
import { useState } from "react"

export function Navbar() {
  const [open, setOpen] = useState(false)

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 items-center">
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon" className="md:hidden">
              <Menu className="h-5 w-5" />
              <span className="sr-only">Toggle menu</span>
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="pr-0">
            <MobileNav setOpen={setOpen} />
          </SheetContent>
        </Sheet>
        <Link href="/" className="mr-6 flex items-center space-x-2">
          <Calendar className="h-6 w-6" />
          <span className="font-bold inline-block">Modern Calendar</span>
        </Link>
        <nav className="hidden md:flex items-center space-x-4 lg:space-x-6 mx-6">
          <Button asChild variant="ghost">
            <Link href="/">
              <Calendar className="h-4 w-4 mr-2" />
              Month
            </Link>
          </Button>
          <Button asChild variant="ghost">
            <Link href="/week">
              <LayoutGrid className="h-4 w-4 mr-2" />
              Week
            </Link>
          </Button>
          <Button asChild variant="ghost">
            <Link href="/day">
              <List className="h-4 w-4 mr-2" />
              Day
            </Link>
          </Button>
        </nav>
        <div className="flex flex-1 items-center justify-end space-x-4">
          <Button size="sm">
            <Plus className="h-4 w-4 mr-2" />
            New Event
          </Button>
          <ThemeToggle />
        </div>
      </div>
    </header>
  )
}

function MobileNav({ setOpen }: { setOpen: (open: boolean) => void }) {
  return (
    <div className="flex flex-col space-y-4 py-4">
      <Link
        href="/"
        className="flex items-center px-4 py-2 text-sm font-medium"
        onClick={() => setOpen(false)}
      >
        <Calendar className="h-4 w-4 mr-2" />
        Month
      </Link>
      <Link
        href="/week"
        className="flex items-center px-4 py-2 text-sm font-medium"
        onClick={() => setOpen(false)}
      >
        <LayoutGrid className="h-4 w-4 mr-2" />
        Week
      </Link>
      <Link
        href="/day"
        className="flex items-center px-4 py-2 text-sm font-medium"
        onClick={() => setOpen(false)}
      >
        <List className="h-4 w-4 mr-2" />
        Day
      </Link>
    </div>
  )
}